import {useEffect, useState} from "react";
import {Button, message, Modal, Typography} from "antd";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";
import TextArea from "antd/es/input/TextArea";
import {FileTextOutlined, InfoCircleOutlined} from "@ant-design/icons";

const {Title, Text} = Typography;

const ServiceConfigFileEdit = (props) => {
    const {
        visible,
        setVisible,
        serviceDetail,
        searchServiceGovernanceById
    } = props;

    const [messageApi, contextHolder] = message.useMessage();
    // 编辑服务信息请求参数
    const [editServiceGovernanceReq, setEditServiceGovernanceReq] = useState({
        id: serviceDetail?.id || '',
        serviceTitle: '',
        serviceName: '',
        serviceDescription: '',
        projectManagerNickname: '',
        gitUrl: '',
        frontBackType: '', // 存储字符串形式的"0"或"1"
        serviceConfigFile: ''
    });

    /**
     * 根据id编辑服务治理信息
     */
    const editServiceGovernanceById = () => {
        RequestUtils.post(RequestApis.serviceGovernance.editById, {
            id: serviceDetail.id, // ID用原始值确保正确
            serviceTitle: serviceDetail.serviceTitle,
            serviceName: serviceDetail.serviceName,
            serviceDescription: serviceDetail.serviceDescription,
            projectManagerNickname: serviceDetail.projectManagerNickname,
            gitUrl: serviceDetail.gitUrl,
            frontBackType: serviceDetail.frontBackType,
            serviceConfigFile: editServiceGovernanceReq.serviceConfigFile
        }).then(res => {
            searchServiceGovernanceById(); // 重新查询刷新数据
            messageApi.success('编辑服务配置文件成功');
            setVisible(false); // 关闭模态框
        }).catch(err => messageApi.error(err.message || '编辑失败'));
    }

    /**
     * 模态框打开时的初始化
     */
    useEffect(() => {
        setEditServiceGovernanceReq({
            id: serviceDetail?.id || '',
            serviceTitle: serviceDetail?.serviceTitle || '',
            serviceName: serviceDetail?.serviceName || '',
            serviceDescription: serviceDetail?.serviceDescription || '',
            projectManagerNickname: serviceDetail?.projectManagerNickname || '',
            gitUrl: serviceDetail?.gitUrl || '',
            frontBackType: serviceDetail?.frontBackType || '',
            serviceConfigFile: serviceDetail?.serviceConfigFile || ''
        })
    }, [visible, serviceDetail]);

    return (
        <Modal
            open={visible}
            title={
                <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                    <FileTextOutlined style={{color: '#fa8c16', fontSize: '18px'}} />
                    <Title level={4} style={{margin: 0}}>编辑服务配置文件</Title>
                </div>
            }
            onCancel={() => setVisible(false)}
            width={900}
            footer={[
                <Button
                    key="submit"
                    type={"primary"}
                    onClick={() => editServiceGovernanceById()}
                    style={{
                        padding: '6px 24px',
                        fontSize: '14px',
                        borderRadius: '4px',
                        transition: 'all 0.2s ease'
                    }}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: 'translateY(-1px)'
                    }}
                >
                    保存配置
                </Button>,
                <Button
                    key="cancel"
                    danger
                    style={{
                        marginLeft: "12px",
                        padding: '6px 24px',
                        fontSize: '14px',
                        borderRadius: '4px',
                        transition: 'all 0.2s ease'
                    }}
                    onClick={() => setVisible(false)}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: 'translateY(-1px)'
                    }}
                >
                    取消
                </Button>
            ]}
            bodyStyle={{
                padding: '24px',
                backgroundColor: '#fafafa'
            }}
            style={{
                borderRadius: '8px',
                overflow: 'hidden'
            }}
        >
            <div>
                {contextHolder}

                {/* 提示信息栏 */}
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '10px 16px',
                    backgroundColor: 'rgba(24, 144, 255, 0.05)',
                    borderLeft: '3px solid #1890ff',
                    borderRadius: '4px',
                    marginBottom: '16px'
                }}>
                    <InfoCircleOutlined style={{color: '#1890ff', fontSize: '16px'}} />
                    <Text style={{color: '#4e5969', fontSize: '13px'}}>
                        配置文件将用于服务部署与运行环境初始化，请确保格式正确
                    </Text>
                </div>

                {/* 配置文件标题 */}
                <div style={{
                    marginBottom: '12px',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <Text strong style={{color: '#1f2329', fontSize: '14px'}}>
                        服务配置内容
                    </Text>
                    <Text style={{color: '#86909c', fontSize: '12px'}}>
                        服务ID: {serviceDetail?.id || '未知'}
                    </Text>
                </div>

                {/* 文本编辑区域 */}
                <TextArea
                    rows={16}
                    value={editServiceGovernanceReq.serviceConfigFile}
                    onChange={(e) => {
                        setEditServiceGovernanceReq({
                            ...editServiceGovernanceReq,
                            serviceConfigFile: e.target.value
                        })
                    }}
                    style={{
                        width: '100%',
                        minHeight: '320px',
                        padding: '16px',
                        fontSize: '14px',
                        lineHeight: '1.6',
                        fontFamily: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
                        borderRadius: '6px',
                        border: '1px solid #dcdfe6',
                        backgroundColor: '#ffffff',
                        resize: 'vertical',
                        transition: 'border-color 0.2s ease'
                    }}
                    placeholder="请输入服务配置文件内容..."
                    autoSize={false}
                    onFocus={(e) => {
                        e.currentTarget.style.borderColor = '#1890ff';
                        e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                    }}
                    onBlur={(e) => {
                        e.currentTarget.style.borderColor = '#dcdfe6';
                        e.currentTarget.style.boxShadow = 'none';
                    }}
                />
            </div>
        </Modal>
    )
}

export default ServiceConfigFileEdit;